<div class="ad-infinite-list-container">
    <div class="dropdown">
        <button type="button" 
                class="dropdown-toggle" 
                ng-class="attrs.btnClasses || 'btn btn-default'" 
                data-toggle="dropdown">
            <span ng-if="!attrs.labelDisplayProperty || !selectedItems.length">
              {{ attrs.initialLabel || 'Select' }}
            </span>
            <span ng-if="attrs.labelDisplayProperty && selectedItems.length">
                {{ adStrapUtils.getObjectProperty(selectedItems[selectedItems.length - 1], attrs.labelDisplayProperty) }}
            </span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu"
            role="menu"
            ng-style="localConfig.dimensions">
            <li class="text-overflow" data-ng-repeat="item in items.list"
                ng-class="{'active': adStrapUtils.itemExistsInList(item, selectedItems)}"
                ng-click="addRemoveItem($event, item, selectedItems)">
                <a role="menuitem" tabindex="-1" href="">
                    <span ng-if="attrs.displayProperty">
                        {{ adStrapUtils.getObjectProperty(item, attrs.displayProperty) }}
                    </span>
                    <span ng-if="attrs.template"
                          ad-compile-template="{{ attrs.template }}"></span>
                    <span ng-if="attrs.templateUrl"
                          ng-include="attrs.templateUrl"></span>
                </a>
            </li>
            <li class="text-overflow text-center"
                ng-style="{'opacity': localConfig.loadingData ? 1 : 0}">
                <a role="menuitem" tabindex="-1" href="">
                    <ad-loading-icon></ad-loading-icon>
                </a>
            </li>
        </ul>
    </div>
</div>
